<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM</title>
    <style>
        li:hover {
            background: orange !important;
            color: #fff;
        }

        textarea {
            margin: 10px 0;
            vertical-align: top;
            /* 不能调文本域大小 */
            resize: none;

        }

        button {
            margin: 20px 50px 0 100px;
        }

        .msgArea {
            position: relative;
            width: 500px;
            height: 600px;
            border: 1px solid #000;
            margin-top: 20px;
            overflow: hidden;
            /* white-space: nowrap;
            text-overflow: ellipsis; */
            box-sizing: border-box;
        }

        h2 {
            text-align: center;
        }

        a {
            float: right;
            text-decoration: none;
            color: red;
        }
    </style>
</head>

<body>
    <!-- <h2>标题</h2> -->
    <p>罗建明<span>文本</span>666</p>
    <!-- <form action=""> -->
    <label for="nickname">昵称：</label>
    <input type="text" placeholder='请输入昵称' id="nickname" name="nickname"><br>
    留言： <textarea name="message" id="message" cols="30" rows="10"></textarea><br>
    <button>提交</button>
    <!-- </form> -->
    <div class="msgArea">
        <h2>留言板</h2>
    </div>
</body>
<script>
    // console.log(window);
    // console.log(document.doctype);
    // console.log(document.documentElement);
    // console.log(document.head);
    // console.log(document.body);
    // console.log(document.title);
    // console.log(document.URL);
    // console.log(document.readyState);
    // console.log(window.location)
    // location.href = 'demo5.html';//网页跳转

    // document.getElementById('id');
    // document.getElementsByClassName('class');
    // document.getElementsByTagName('p');
    // document.getElementsByName('name');
    // document.querySelector('#id');
    // document.querySelectorAll('.class');

    // arr = [1, 2, 3, 4, 5];
    // let 块级作用域，只有for循环里可以访问
    // for (let i = 0; i < arr.length; i++) {
    //     console.log(arr[i]);
    // }
    // console.log(i);//i未定义
    var p = document.querySelector('span');
    // var div1 = document.createElement('div');
    // var text = document.createTextNode('hello luojianming');
    // document.body.appendChild(div1);
    // div1.appendChild(text);
    // p.setAttribute('style', 'background:pink');
    // div1.setAttribute('style', 'background:green');
    // // 添加样式（覆盖之前的）
    // div1.style.cssText = "color:red";
    // // 添加样式（不覆盖之前的非重复样式）
    // div1.style.cssText += "background-color:orange";

    // var title = document.createAttribute('title');
    // title.value = '罗建明';
    // div1.setAttributeNode(title);

    // var arr = ['华为', '苹果', '小米', '三星', 'vivo', 'oppo'];
    // var ul = document.createElement('ul');

    // for (let i in arr) {
    //     var li = document.createElement('li');
    //     li.innerHTML = arr[i];
    //     ul.appendChild(li);
    //     li.setAttribute('style', 'float:left;list-style:none;padding: 10px 20px;border:1px solid;background:pink;');
    //     // 设置元素style里的属性（样式）
    //     li.style.setProperty('font-style', 'italic');
    //     li.style.removeProperty('font-style');
    //     console.log(li.style.getPropertyValue('border'));
    // }
    // document.body.appendChild(ul);

    // window.onclick = function () {
    //     var res = document.body.contains(div);
    //     console.log(res);
    //     if (res) {
    //         alert('div已存在！！！');
    //     } else {
    //         var div = document.createElement('div');
    //         div.style.cssText = 'width:500px;height:300px;background:blue';
    //         document.body.appendChild(div);
    //         console.log(document.body.children)
    //     }
    // }


    // 用dom操作创建一个相册图片
    // var oimg = document.createElement('img');
    // oimg.src = './images/bear.png';
    // oimg.style.cssText = 'width:1000px;margin:100px';
    // document.body.appendChild(oimg);
    // oimg.style.setProperty('outline', '5px dotted red');
    // oimg.style.cssText += 'outline-offset: 10px';


    // Node属性
    var input = document.getElementById('nickname');
    var btn = document.querySelector('button');
    var message = document.querySelector('textarea');
    var h2 = document.querySelector('h2');
    var span = document.querySelector('span');
    var sp = document.getElementsByTagName('span')[0];

    // console.log(p);
    // console.log(p.nodeName);
    // console.log(p.nodeType);
    // console.log(input.nodeName);
    // console.log(input.nodeType);
    // nodeValue返回文本节点的值 ， 其他节点为null
    // console.log(span.nodeValue);

    //返回当前元素的顶层对象-document
    // console.log(btn.ownerDocument);

    //获取当前元素的下一个兄弟节点元素
    // console.log(p.nextSibling); //包括文本节点和元素节点
    // console.log(p.nextElementSibling); //只有元素节点

    //获取当前元素的上一个兄弟节点元素
    // console.log(input.previousSibling); //包括文本节点和元素节点
    // console.log(input.previousElementSibling); //只有元素节点

    //获取父亲节点元素
    console.log(p.parentNode);
    console.log(p.parentElement);

    //获取当前元素的第一个子节点
    // console.log(p.firstChild); ///包括文本节点和元素节点
    // console.log(p.firstElementChild);//只有元素节点

    //获取当前元素的最后一个子节点
    // console.log(p.lastChild); ///包括文本节点和元素节点
    // console.log(p.lastElementChild);//只有元素节点

    //获取子节点数组
    // console.log(p.children);//只有元素节点
    // console.log(p.childNodes);//包括文本节点和元素节点


    // Node方法
    //***添加子节点
    // var span1 = document.createElement('span');
    // span1.innerHTML = '新增';
    // var span2 = document.createElement('span');
    // span2.innerHTML = '新增2';
    // p.appendChild(span1);

    //克隆子节点
    // p.appendChild(span.cloneNode(true));

    //向前添加子节点(newnode,oldnode)
    // p.insertBefore(span2, span);

    //删除子节点
    // p.removeChild(span2);

    //修改子节点(newnode,oldnode)
    // p.replaceChild(span2, span1);

    // 节点判断
    // hasChildNodes():判断是否有子节点，返回true or false
    // console.log(p.hasChildNodes());
    // 判断是否包含指定的节点
    // console.log(p.contains(span));
    //isEqualNode():判断两个节点是否相等
    // console.log(span, sp);
    // console.log(span.isEqualNode(sp));//静态获取与动态获取的同一元素    


    // 简易留言版
    var msgArea = document.querySelector('.msgArea');
    var oul = document.createElement('ul');
    oul.style.cssText = 'padding: 0 20px'
    msgArea.appendChild(oul);
    btn.onclick = function () {
        var oli = document.createElement('li');
        var h3 = document.createElement('h3');
        var p = document.createElement('p');
        h3.innerHTML = input.value;
        p.innerHTML = message.value + "<a>删除</a>";
        oli.appendChild(h3);
        oli.appendChild(p);
        if (oul.childElementCount == 0) {
            oul.appendChild(oli);
        } else {
            oul.insertBefore(oli, oul.children[0]);//在ul中的第一个li前插入一个新li;
        }

        // 删除留言功能
        var anchors = document.querySelectorAll('a');
        console.log(anchors);
        anchors.forEach((val, i) => {
            anchors[i].onclick = function () {
                oul.removeChild(this.parentNode.parentNode);
            }
        })
    }



    // 获取有相对或绝对定位的父元素 offsetParent属性（无定位就返回body）
    console.log(h2.offsetParent);
    // 获取当前节点距离有定位父元素的顶部距离（只读）
    console.log(h2.offsetParent.offsetTop);
    // 获取当前节点距离有定位父元素的左侧距离（只读）
    console.log(h2.offsetParent.offsetLeft);
    //获取元素的宽高（只读）
    console.log(msgArea.offsetWidth);
    console.log(msgArea.offsetHeight);
    console.log(msgArea.clientWidth);
    console.log(msgArea.clientHeight);


</script>

</html>